<#assign ctx=request.contextPath/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>评论页</title>
		<link rel="stylesheet" href="${ctx}/css/bootstrap.css" />
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/evaluation_page.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="${ctx}/js/bootstrap.js" ></script>
		<script type="text/javascript" src="${ctx}/js/myjs.js"></script>
		<script src="${ctx}/js/upfile.js" type="text/javascript" charset="utf-8"></script>
	</head>
<body style="background:#f0f0f0;">
		<#include "common/top.html"/>
		<article class="center">
			<header class="content_top">
				<h3>用户中心</h3>
			</header>
			<div class="content clear">
				<div class="content_left">
						<dl>
							<dt>订单中心</dt>
							<dd>
								<ul>
									<li><a href="order.html">我的订单</a></li>
									<li><a href="#">团购订单</a></li>
									<li><a href="#">本地生活订单</a></li>
									<li><a href="#">取消订单</a></li>
								</ul>
							</dd>
						</dl>
						<dl>
							<dt>关注中心</dt>
							<dd>
								<ul>
									<li><a href="#">关注的商品</a></li>
									<li><a href="#">关注的店铺</a></li>
									<li><a href="#">关注的品牌</a></li>
									<li><a href="#">关注的活动</a></li>
								</ul>
							</dd>
						</dl>
						<dl>
							<dt>客服服务</dt>
							<dd>
								<ul>
									<li><a href="#">退换货服务</a></li>
									<li><a href="#">价格保护</a></li>
									<li><a href="evaluation_page.html" class="on">意见建议</a></li>
									<li><a href="#">购买咨询</a></li>
									<li><a href="#">售后服务</a></li>
								</ul>
							</dd>
						</dl>
						<dl>
							<dt>个人设置</dt>
							<dd>
								<ul>
									<li><a href="user.html">个人资料</a></li>
									<li><a href="address.html" >收货地址</a></li>
									<li><a href="#">修改密码</a></li>
								</ul>
							</dd>
						</dl>
				</div>
				<div class="content_right">
					<div class="argure">
						<h5>评论页</h5>
					</div>
					<div class="content_middle clear">
						<#if goods?? >
							<div class="argure_left">
								<a href="pro_details.html"><img style="width: 120px;height: 100px;" src="${ctx}/file/upload/${goods.image}"/></a>
								<h3><a href="pro_details.html">${goods.title}</a></h3>
								<p><a href="pro_details.html">${goods.description}</a></p>
							</div>
						</#if>
						<#if comment?? >
							<div class="argure_left">
								<a href="pro_details.html"><img style="width: 120px;height: 100px;" src="${ctx}/file/upload/${comment.image}"/></a>
								<h3><a href="pro_details.html"></a></h3>
								<p><a href="pro_details.html">${comment.detail}</a></p>
							</div>
						</#if>

						<div class="argure_right">
							<h4>商品满意度</h4>
							<ul class="mark">
								<li><img id="img_1" src="${ctx}/images/xing3.png"/></li>
								<li><img id="img_2" src="${ctx}/images/xing3.png"/></li>
								<li><img id="img_3" src="${ctx}/images/xing3.png"/></li>
								<li><img id="img_4" src="${ctx}/images/xing3.png"/></li>
								<li><img id="img_5" src="${ctx}/images/xing3.png"/></li>
								<li><img id="img_6" src="${ctx}/images/xing3.png"/></li>
							</ul>
							<span style="color: red;" >${tip!''}</span>
							<script type="text/javascript">
								$(function(){
									$("img[id^='img_'").click(function(){
										var imgId = $(this).attr("id").replace("img_","");
										$("#star").val(imgId);
										$("img[id^='img_'").attr("src","${ctx}/images/xing3.png");
										for(var i = 0;i<imgId;i++){
											$("#img_"+(i+1)).attr("src","${ctx}/images/star-1.png");
										}
									});
								});
							</script>
							<form class="sub_com clear" method="post" enctype="multipart/form-data" action="${ctx}/customer/comment/addComment" >
								<span>评论晒单</span>
								<#if goods??>
									<input type="hidden" id="goodId" value="${goods.id}" name="goods.id" >								
								</#if>
								<#if comment??>
									<input type="hidden" value="${comment.goods.id}" name="goods.id" >								
								</#if>
								<input type="hidden" name="satisfaction" id="star" >
								<div class="inp_con clear">
									<textarea name="detail" ></textarea>
									<ol id="img_show">
									</ol>
									<p class="clear">颜色分类：云升级+固定流动+区间测速+实时路况+天气预报</p>
								</div>
								<div class="argure_bottom">
									<input type="submit" value="提交" class="hand" >
									<img src="${ctx}/images/camera.jpg"/>
									<label>
										<input name="goodsImg" onchange="checkFile(this)" id="upfile" type="file" class="bottom" />
										<span>上传相片</span>
									</label>
								</div>
							</form>
						</div>
					</div>
					<ol class="cent clear" id="commentList" >	
					
					</ol>
					<script type="text/javascript">
						$(function(){
							
							var goodId = $("#goodId").val();
							
							$.post("${ctx}/customer/comment/getCommentList?id="+goodId,function(data){
								
								for(var i = 0;i<data.length;i++){									
									var bigLi = $("<li></li>");
									var comh3 = $("<h3></h3>").text(data[i].user.user_id);
									var comdiv = $("<div></div>").addClass("right");
									var comh4 = $("<h4></h4>").text("评分:");
									var comulone = $("<ul></ul>");
									for(var j = 0 ;j<data[i].satisfaction;j++){
										var comimgone = $("<img></img>").attr("src","${ctx}/images/star-1.png");
										var comlione = $("<li></li>");
										comimgone.appendTo(comlione);
										comlione.appendTo(comulone);
									}
									var unsaNum = 6 - data[i].satisfaction;
									for(var k = 0;k< unsaNum;k++){
										var comimgtwo = $("<img></img>").attr("src","${ctx}/images/xing3.png");
										var comlitwo = $("<li></li>");
										comimgtwo.appendTo(comlitwo);
										comlitwo.appendTo(comulone);
									}
									var comh2 = $("<h2></h2>").text(data[i].detail);
									var comultwo = $("<ul></ul>").addClass("picture");
									var comimgthree = $("<img></img>").attr("src","${ctx}/file/upload/"+data[i].image);
									var comlithree = $("<li></li>");
									comimgthree.appendTo(comlithree);
									comlithree.appendTo(comultwo);
									var comp = $("<p></p>").addClass("clear").text("颜色分类：云升级+固定流动+区间测速+实时路况+天气预报");
									
									comh4.appendTo(comdiv);
									comulone.appendTo(comdiv);
									comh2.appendTo(comdiv);
									comultwo.appendTo(comdiv);
									comp.appendTo(comdiv);
									
									comh3.appendTo(bigLi);
									comdiv.appendTo(bigLi);
									
									bigLi.appendTo("#commentList");
									
								}
	
							});							
						});
					</script>
					<div class="page clear">
						<ul>
							<li><a href="#">上一页</a></li>
							<li><a href="#" class="on">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">...</a></li>
							<li><a href="#">下一页</a></li>
						</ul>
					</div>
				</div>
			</div>
		</article>

		<#include "common/bottom.html"/>
		